<template>
    <div class="dinner-wrapper">
        <div class="top">
            <span>{{orderInfo.number}}的菜单 <span class="state">{{orderInfo.status_name}}</span></span>
            <span class="time">{{orderInfo.create_time}}</span>
        </div>
        <div class="menu">
            <div v-for="(item, index) in orderInfo.order_list">
                <div class="menu-title">
                    <span class="menu-name" v-if="item.is_order == 1 ">初始菜单</span>
                    <span class="menu-name" v-else>加菜单</span>
                </div>
                <ul>
                    <li v-for="(detail, index) in item.detail">
                        <div>
                            <img v-lazy="renderImg(detail.cover)" />
                            <span>{{detail.name}} {{detail.dime_name | filterDimen}}</span>
                            <span class="num"> x {{detail.copies}}</span>
                        </div>
                        <div class="price">￥{{detail.copies * detail.price}}</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="call">
            <div class="callContainer">
                <div class="service" @click="callServer">
                    <img/>
                    <span>呼叫服务员</span>
                </div>
            </div>
            <div class="payment">
                <div class="paymentContainer">
                    <div class="add"  @click="addDinner">加菜</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from '../plugins/axios';
    export default {
        async asyncData ({res, req, error}) {
            let response = {};
            let userInfo = res.locals.userInfo;
            let token = res.locals.token;
            let tableInfo = req.query;
            try {
                response = await axios.get('/api/h5/customer/dining', {
                    params: {
                        order_id: tableInfo.order,
                        token
                    }
                });
                response = response.data || {};
            } catch (e) {
                error({});
            }
            return {
                orderInfo: response.data || {},
                userInfo,
                token,
                tableInfo
            }
        },
        head () {
            return {
                title: '用餐中'
            }
        },
        filters: {
            filterDimen(val){
                if (val == '/') {
                    return ''
                } else {
                    return `(${val})`
                }

            }
        },
        methods: {
            callServer(){
                let tableInfo = this.tableInfo;
                window.location.href = `./callServer?store=${tableInfo.store}&table=${tableInfo.table}&order=${tableInfo.order}`
            },
            addDinner(){
                let tableInfo = this.tableInfo;
                window.location.href = `./menu?store=${tableInfo.store}&table=${tableInfo.table}&order=${tableInfo.order}&num=${this.orderInfo.dining_count}&extra=y`
            }
        }
    }
</script>
<style lang="less" scoped>
    .dinner-wrapper {
        min-height: 100vh;
        height: 100%;
        background: #eee;
        .top {
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            display: flex;
            padding: 0 20px;
            justify-content: space-between;
            .state {
                color: #FF5B29;
            }
            .time {
                color: #B3B3B3;
            }
        }
        .menu {
            background: #FFFFFF;
            box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
            height: 280px;
            font-size: 12px;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            .menu-title {
                padding: 10px 0 0 20px;
                font-size: 12px;
                letter-spacing: 0.14px;
            }
            .menu-name {
                color: #B3B3B3;
            }
            ul {
                li {
                    display: flex;
                    justify-content: space-between;
                    height: 45px;
                    line-height: 45px;
                    padding: 0 20px;
                }
                li + li {
                    border-top: 1px solid #EDEDED;;
                }
                img {
                    width: 25px;
                    height: 25px;
                    vertical-align: middle;
                    margin-right: 10px;
                    background: #eee;
                }
                .num {
                    margin-left: 10px;
                }
                .price {
                    color: #FF5B29;
                }
            }
        }
        .call {
            padding: 40px 0 54px 0;
            display: flex;
            justify-content: center;
            font-size: 12px;
            text-align: center;
            flex-direction: column;
            .callContainer {
                display: flex;
                justify-content: center;
            }
            .service {
                width: 105px;
                height: 105px;
                border-radius: 50%;
                background-image: linear-gradient(-132deg, #FFEB00 13%, #FFD200 87%);
                box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.10);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
        }
        .payment {
            display: flex;
            justify-content: center;
            line-height: 44px;
            margin-top: 54px;
            .paymentContainer {
                display: flex;;
            }
            .add {
                background: #000000;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.20);
                border-radius: 21px;
                font-size: 18px;
                width: 150px;
                height: 44px;
                color: #FFFFFF;
                text-align: center;

            }
        }
    }
</style>